<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>染色效果</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 300px;
            height: 300px;
            margin: 20px auto;
            overflow: hidden;
        }

        img {
            width: 100%;
        }

        .image1 {
            /* transition: .5s filter; */
            filter: sepia(1) saturate(1) hue-rotate(325deg);
        }

        .image1:hover,
        .image1:focus {
            filter: none;
        }

        a {
            display: block;
            width: 300px;
            /* height:200px; */
            margin: 20px auto;
            font-size: 0;
            background: hsl(335, 100%, 50%);
        }

        .image2 {
            mix-blend-mode: luminosity;
        }

        .tinted-image {
            background: url(./img/tiger.jpg);
        }

        .tinted-image {
            width: 640px;
            height: 440px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-blend-mode: luminosity;
            transition: .5s background-color;
        }

        .tinted-image:hover {
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>基于滤镜方案</h1>
        <ul>
            <li>
                filter: sepia(1) saturate(1) hue-rotate(325deg);
            </li>
        </ul>
        <div class="box shadow1 ">
            <img class="image1" src="../03视觉效果/img/tiger.jpg" alt="">
        </div>
    </div>
    <div class="content">
        <h1>混合模式方案</h1>
        <ul>
            <li>混合模式控制了上层元素的颜色与下层颜色进行混合的方式</li>
            <li>luminosity混合模式 会保留上层元素的HSL亮度信息，并从它的下层吸取色相和饱和度信息</li>
            <li>mix-blend-mode 可以为整个元素设置混合模式，background-blend-mode 可以为每层背景单独指定混合模式</li>
            <ul>
                <li>第一种选择：需要把图片包裹在一个容器中，并把容器背景设置为我们想要的主色调</li>
                <li>第二种选择：用div元素，把这个元素的第一层背景设置为要染色的图片，并把第二层的背景设置为我们想要的主色调</li>
            </ul>
            <li>混合模式可以平稳退化，如果不支持，效果不会出现，图片本身还是好的</li>
            <li>滤镜是可以动画的，而混合模式不可以</li>
            <li>
                两种方法的问题
                <ul>
                    <li>图片的尺寸需要在css代码中写死</li>
                    <li>在语义上，这个元素并不是一张图片，因此不能被读屏器之类的设备读出来</li>
                </ul>
            </li>
        </ul>
        <a href="#" id="">
            <img class="image2" src="../03视觉效果/img/tiger.jpg" alt="">
        </a>
        <div class="box tinted-image ">
        </div>
    </div>
</body>

</html>